import React from 'react';
import { Button } from 'antd';
import ModalsFooterBtn from './ModalsFooterBtn';

interface Props {
  onOk?: () => void;
  onCancel?: () => void;
  onAllCancel?: () => void;
  footerAllCancelHidden?: boolean;
  children?: React.ReactNode;
  okText?: string | React.ReactNode;
  cancelText?: string | React.ReactNode;
  footerCancelHidden?: boolean;
  footerOkHidden?: boolean;
  footerCancelDisabled?: boolean;
  footerOkDisabled?: boolean;
  confirmLoading?: boolean;
  cancelLoading?: boolean;
  line?: boolean;
  isDisplay?: boolean;
}

const ModalsFooter = ({
  footerCancelHidden,
  footerCancelDisabled,
  onCancel,
  onAllCancel,
  footerAllCancelHidden,
  cancelText,
  confirmLoading,
  cancelLoading,
  footerOkHidden,
  footerOkDisabled,
  onOk,
  okText,
  line,
  isDisplay,
}: Props) => {
  return (
    <div
      className={`${!isDisplay && ' flex items-center justify-end gap-3 px-4 py-3'}`}
      style={
        line
          ? {
              borderTop: '1px solid #E5E6EB',
            }
          : {}
      }
    >
      {!footerAllCancelHidden && (
        <ModalsFooterBtn
          type="primary"
          onClick={onAllCancel}
          disabled={footerCancelDisabled}
          loading={cancelLoading}
        >
          {cancelText}
        </ModalsFooterBtn>
      )}
      {!footerCancelHidden && (
        <ModalsFooterBtn onClick={onCancel} disabled={footerCancelDisabled} loading={cancelLoading}>
          {cancelText}
        </ModalsFooterBtn>
      )}
      {!footerOkHidden && (
        <ModalsFooterBtn
          type="primary"
          onClick={onOk}
          disabled={footerOkDisabled}
          loading={confirmLoading}
        >
          {okText}
        </ModalsFooterBtn>
      )}
    </div>
  );
};

export default ModalsFooter;
